<template>
    <div class="user">
        <div class="content-top">
            <div class="bgc">
                <p class="user-title">我的</p>
                <div class="fx-spb user-info">
                    <div class="left fx-spb">
                        <img src="../../images/index/icon-header.png">
                        <div class="fx-col-spb">
                            <p class="ell">两只老虎哈哈哈哈哈哈哈</p>
                            <span class="ell">ID:65788768</span>
                        </div>
                    </div>
                    <div class="right">
                        <span>关于我们</span>
                    </div>
                </div>
            </div>
            <div class="order-info fx-col-spb">
                <div class="fx-spb order-info-top">
                    <div>
                        <p>待付款</p>
                        <p class="fs-18">3</p>
                    </div>
                    <div>
                        <p>待发货</p>
                        <p class="fs-18">4</p>
                    </div>
                    <div>
                        <p>待收货</p>
                        <p class="fs-18">6</p>
                    </div>
                    <div>
                        <p>退款/售后</p>
                        <p class="fs-18">2</p>
                    </div>
                </div>
                <div class="fx-spb order-info-bottom">
                    <div class="fx-col-spb">
                        <img src="../../images/index/icon-address.png">
                        <p>收货地址</p>
                    </div>
                    <div class="fx-col-spb">
                        <img src="../../images/index/icon-order.png">
                        <p>所有订单</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="content-bottom">
            <router-link class="my-card fx-spb" to="/coupon" tag="div">
                <img src="../../images/index/icon-coupon.png">
                <p>我的卡券</p>
                <span>你有3张优惠券待使用</span>
                <img src="../../images/common/icon-more.png">
            </router-link>
            <div class="call-us fx-spb">
                <img src="../../images/index/icon-customer.png">
                <p>联系客服</p>
                <span>400-123-123</span>
                <img src="../../images/common/icon-more.png">
            </div>
        </div>
        <div style="height:0.2rem;backgroundColor:#FAFAFA;"></div>


        <nav class="nav-bar">
            <router-link class="nav-tab-item" to="/index">
                <img src="../../images/index/icon-index.png" class="icon-index">
                <span class="nav-tab-label">首页</span>
            </router-link>
            <router-link class="nav-tab-item" to="/classify">
                <img src="../../images/index/icon-classify.png" class="icon-classify">
                <span class="nav-tab-label">分类</span>
            </router-link>
            <router-link class="nav-tab-item" to="/cart">
                <img src="../../images/index/icon-cart.png" class="icon-cart">
                <span class="nav-tab-label">购物车</span>
            </router-link>
            <router-link class="nav-tab-item" to="/user">
                <img src="../../images/index/icon-my-active.png" class="icon-my">
                <span class="nav-tab-label"  style="color:#39BFB3;">我的</span>
            </router-link>
        </nav>
    </div>
</template>

<script>
export default {
    data() { 
        return {

        }
    }
 }
</script>

<style lang="scss" scoped>
.user{
    height: 100%;
    .content-top{
        position: relative;
        height: 7rem;
        .bgc{
            width: 100%;
            height: 4.2rem;
            padding-top: 0.4rem;
            background: linear-gradient(to right,#39BFB3,#76E6DC);
            color: #fff;
            .user-title{
                text-align: center;
                font-size: 0.36rem;
            }
            .user-info{
                height: 2rem;
                width: 100%;
                padding: 0.4rem;
                .left{
                    img{
                        width: 1.14rem;
                        height: 1.14rem;
                        margin-right: 0.4rem;
                    }
                    div{
                        padding: 0.1rem 0;
                        p{
                            font-size: 0.36rem;
                            width: 60%;
                        }
                        span{
                            width: 60%;
                        }
                    }
                }
                .right{
                    height: 1.2rem;
                    text-align: right;
                    padding-top: 0.4rem;
                    span{
                        display: block;
                        font-size: 0.24rem;
                        width: 1.4rem;
                        position: relative;
                    }
                    span::before{
                        content: '';
                        display: block;
                        width: 0.24rem;
                        height: 0.24rem;
                        background: url('../../images/index/icon-aboutus.png') no-repeat;
                        background-size: 100% 100%;
                        position: absolute;
                        left: 0;
                        top: 50%;
                        transform: translateY(-50%);
                    }

                }
            }
        }
        .order-info{
            width: 90%;
            height: 3rem;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 50%;
            background-color: #fff;
            padding: 0.2rem 0.3rem;
            border-radius: 10px;
            box-shadow: 2px 0px 5px #F6F6F6,  /*右边阴影*/ 
                        0px 15px 15px #F6F6F6; /*下边阴影*/
            .order-info-top{
                height: 50%;
                padding-top: 0.1rem;
                text-align: center;
                border-bottom: 0.02rem dashed #D9DCEE;
                .fs-18{
                    font-size: 0.36rem;
                }
            }
            .order-info-bottom{
                height: 50%;
                div{
                    width: 50%;
                    align-items: center;
                    padding: 10px 0;
                    img{
                        width: 0.8rem;
                        height: 0.64rem;
                    }
                }
            }
        }
    }
    .content-bottom{
        .my-card,.call-us{
            height: 1rem;
            border-top: 2px solid #F6F6FA;
            align-items: center;
            padding: 0 0.4rem;
            position: relative;
            img{
                width: 0.38rem;
                height: 0.3rem;
            }
            span{
                font-size: 0.26rem;
                position: absolute;
                right: 13%;
            }
            p{
                position: absolute;
                left: 15%;
            }
        }
        .call-us{
            img{
                width: 0.36rem;
                height: 0.4rem;
            }
        }
    }
}
</style>